<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1322088_dfj23uc6z9o.css"/>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<link rel="stylesheet" type="text/css" href="js/layui/css/layui.css"/>
		<link rel="stylesheet" type="text/css" href="css/anv.css"/>
	</head>
	<style type="text/css">
		option:first-child{
			color: #ccc;
			height: 40px;
			line-height: 40px;
		}
		.list-ite{
			display: none;
		}
		
		.form-controls.bg-white{
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.main-box>.bg-white>.list-ite{
			position: absolute;
			top: 35px;
			width: 100%;
			background: #fff;
			box-shadow: 0 0 5px 0 #f1f1f1;
			left: 0px;
			max-height: 290px;
			overflow-y: auto;
			z-index: 10;
		}
		.main-box>.bg-white>.list-ite li{
			height: 35px;
			line-height: 35px;
			padding: 0 10px;
			transition: all .3s;
			user-select: none;
		}
		.main-box>.bg-white>.list-ite li:hover{
			color: #13c19f;
			transition: all .3s;
			background-color: #eef1f9;
		}
	</style>
	<body>
		<div class="container-fluid bg-white">
			<!-- 订单列表 -->
			<div class="order order-box">
				<div class="ood-box">
					<!-- 顶部工具条 -->
					<nav class="flex">
						<!-- 默认显示的操作栏 -->
						<div class="dutault-nav width100 flex">
							<div class="heard-left width100 flex">
								<div class="col-md-2 nav-tab-box padding-0">
									<div @click="showMin($event)" class="sle-box"><span class="changeSelectData">全部级别</span><i class="iconfont icon-xiangxia"></i></div>
									<div onclick="closeMain()" class="show-sle-box">
										<div class="show-sle">
											<ul class="mp00">
												<li class="list-none">全部级别</li>
												<li class="list-none">普通</li>
												<li class="list-none">待签代理</li>
												<li class="list-none">三级代理</li>
												<li class="list-none">二级代理</li>
												<li class="list-none">一级代理</li>
											</ul>
										</div>
									</div>
								</div>
								<!-- <div class="col-md-4 flex"><i class="iconfont icon-riqi"></i><input type="text" class="layui-input" id="test10" placeholder=" - "></div> -->
								<div class="col-md-4 padding-0 flex">
									<i class="iconfont icon-search"></i>
									<input type="text" class="layui-input secrh" placeholder="请输入经销商名称/编码/订货账号/联系人/手机" value="" />
									<span @click="showBox()" title="点击进行高级搜索">高级搜索</span>
								</div>
							</div>
							<div class="heard-right col-md-4 padding-0 flex">
								<button type="button">导入</button>
								<button type="button">导出</button>
								<button @click="open()" type="button">新增</button>
							</div>
						</div>
						<!-- 选择订单后显示操作栏 -->
						<div class="caozuo-nav hidden flex">
							<div class="caozuo-nav flex hidden">
								<div class="nav-item">搜索结果</div>
								<div @click="clear()" class="nav-item"><i class="iconfont icon-qingchu-"></i>清除搜索</div>
								<div @click="jixu()" class="nav-item"><i class="iconfont icon-search"></i>继续搜索</div>
							</div>
						</div>
					</nav>
					<!-- 数据列表 -->
					<div class="order-list">
						<table id="order-list" lay-filter="test"></table>
					</div>
				</div>
			</div>
			
			<!-- 高级搜索弹出层 -->
			<div id="myform" class="serchbox hidden">
				<div class="serchcont">
					<div class="serchconttop" style="font-size: 16px;">高级搜索</div>
						<div class="serchcontmidd">
							<div class="form-box">
								<div class="col-md-6 padding-0">
									<div class="fb-box"><span class="title">关键词</span><input type="text" class="form-controls" name="" id="" value="" placeholder="请输入经销商名称/编码/订货账号/联系人/手机"/></div>
									<div class="fb-box">
										<span class="title">经销商级别</span>
										<div class="form-controls bg-white">
											<span>{{checkSelcet}}</span>
											<i class="iconfont icon-xiangxia"></i>
											<div class="list-ite">
												<ul class="mp00">
													<li v-for="(item,index) in selectList" :class="{active:item.active}" :key="index" @click="checkSel($event,item.name,index,0)" class="list-none">{{item.name}}</li>
												</ul>
											</div>
										</div>
									</div>
									<div class="fb-box">
										<span class="title">区域</span>
										<div class="form-controls bg-white">
											<span>{{checkSelcet1}}</span>
											<i class="iconfont icon-xiangxia"></i>
											<div class="list-ite">
												<ul class="mp00">
													<li v-for="(item,index) in selectList1" :class="{active:item.active}" :key="index" @click="checkSel($event,item.name,index,1)" class="list-none">{{item.name}}</li>
												</ul>
											</div>
										</div>
									</div>
									<div class="fb-box"><span class="title">经销商标签</span><input type="text" class="form-controls" name="" id="" value="" /></div>
								</div>
								
								<div class="col-md-6 padding-0">
									<div class="fb-box">
										<span class="title">业务员</span>
										<div class="form-controls bg-white">
											<span class="sel">{{checkSelcet2}}</span>
											<i class="iconfont icon-xiangxia"></i>
											<div class="list-ite">
												<ul class="mp00">
													<li v-for="(item,index) in selectList2" :class="{active:item.active}" :key="index" @click="checkSel($event,item.name,index,2)" class="list-none">{{item.name}}</li>
												</ul>
											</div>
										</div>
									</div>
									<div class="fb-box">
										<span class="title">账期类型</span>
										<div class="form-controls bg-white">
											<span>{{checkSelcet3}}</span>
											<i class="iconfont icon-xiangxia"></i>
											<div class="list-ite">
												<ul class="mp00">
													<li v-for="(item,index) in selectList3" :class="{active:item.active}" :key="index" @click="checkSel($event,item.name,index,3)" class="list-none">{{item.name}}</li>
												</ul>
											</div>
										</div>
									</div>
									<div class="fb-box"><span class="title">创建时间</span><input readonly="true" type="text" style="text-align: center;" class="form-controls layui-input" id="test10" placeholder="开始日期 - 结束日期" /></div>
									<div class="fb-box ">
										<div class="main-box flex">
											<span class="title" style="width: 22%;">推荐人</span>
											<div class="form-controls bg-white">
												<span>{{checkSelcet4}}</span>
												<i class="iconfont icon-xiangxia"></i>
												<div class="list-ite">
													<ul class="mp00">
														<li v-for="(item,index) in selectList4" :class="{active:item.active}" :key="index" @click="checkSel($event,item.name,index,4)" class="list-none">{{item.name}}</li>
													</ul>
												</div>
											</div>
										</div>
										<div class="main-box flex">
											<div class="form-controls bg-white">
												<span>{{checkSelcet5}}</span>
												<i class="iconfont icon-xiangxia"></i>
												<div class="list-ite">
													<ul class="mp00">
														<li v-for="(item,index) in selectList5" :class="{active:item.active}" :key="index" @click="checkSel($event,item.name,index,5)" class="list-none">{{item.name}}</li>
													</ul>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="serchcontmidd">
								<ul>
									<li class="jxliradio">
										<div class="col-md-6">
											<div class="col-md-2">经销商状态</div>
											<div class="col-md-10">
												<div><input type="radio" name="1" id="1" value="" checked/><label for="">全部</label></div>
												<div><input type="radio" name="1" id="2" value="" /><label for="">已开通</label></div>
												<div><input type="radio" name="1" id="3" value="" /><label for="">未开通</label></div>
												<div><input type="radio" name="1" id="4" value="" /><label for="">禁用</label></div>
											</div>
										</div>
										<div class="col-md-6"></div>
									</li>
									<li class="jxliradio">
										<div class="col-md-6">
											<div class="col-md-2">经销商来源</div>
											<div class="col-md-10">
												<div><input type="radio" name="for" id="for1" value="" checked/><label for="">全部</label></div>
												<div><input type="radio" name="for" id="for2" value="" /><label for="">自主注册</label></div>
												<div><input type="radio" name="for" id="for3" value="" /><label for="">手工创建</label></div>
												<div><input type="radio" name="for" id="for4" value="" /><label for="">批量导入</label></div>
											</div>
										</div>
										<div class="col-md-6"></div>
									</li>
								</ul>
							</div>
						</div>
						<div class="serchcontbtom" style="margin-top: 20px;">
							<button @click="empty" type="button">清空</button>
							<button @click="hiddenBox" type="button">取消</button>
							<button @click="queren" type="button">确定</button>
						</div>
					</div>
				</div>
			</div>
			
		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-success layui-btn-xs" lay-event="selext">修改</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
			<a class="layui-btn layui-btn layui-btn-xs" lay-event="form">报价单</a>
		</script>
		<script src="js/jquery-v3-3.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/new_file.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/Gather.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				var height = document.documentElement.clientHeight;
				$(".container-fluid").css({"height":(height-34)+"px"})
			})
			
			$(window).resize(function(){
				var height = document.documentElement.clientHeight;
				$(".container-fluid").css({"height":(height-67)+"px"})
			})
			
			function closeMain(){
				$(".nav-tab-box .show-sle-box").slideToggle(100)
			}
			
			function showTabMain(num){
				if(num > 0){
					$(".flex .dutault-nav").addClass("hidden")
					$(".flex .caozuo-nav").removeClass("hidden")
				}else{
					$(".flex .dutault-nav").removeClass("hidden")
					$(".flex .caozuo-nav").addClass("hidden")
				}
				$(".changeNum").text(num)
			}
			
			//显示下拉菜单列表
			$(document).ready(function(){
				$('.fb-box .bg-white').on("click",function(){
					$(this).find('.list-ite').toggleClass('block')
				})
			})
			
			var vm = new Vue({
				el:".container-fluid",
				data:{
					base64Url:"",
					checkSelcet:"",  //经销商级别
					checkSelcet1:"",   //区域
					checkSelcet2:"",   //业务员
					checkSelcet3:"",   //账期类型
					checkSelcet4:"",   //推荐人1
					checkSelcet5:"",   //推荐人2
					selectList:[     //..经销商级别
						{
							name:"全部级别",
							value:"1"
						},
						{
							name:"普通",
							value:"2"
						},
						{
							name:"待签代理",
							value:"3"
						},
						{
							name:"三级代理",
							value:"4"
						},
						{
							name:"二级代理",
							value:"5"
						},
						{
							name:"一级代理",
							value:"6"
						}
					],
					selectList1:[    //..区域
						{
							name:"北京",
							value:"1"
						},
						{
							name:"上海",
							value:"2"
						}
					],
					selectList2:[    //..业务员
						{
							name:"王阿经理",
							value:"1"
						},
						{
							name:"李经理",
							value:"2"
						},
						{
							name:"沙经理",
							value:"3"
						},
						{
							name:"刁经理",
							value:"4"
						}
					],
					selectList3:[    //..账期类型
						{
							name:"全部",
							value:"1"
						}
					],
					selectList4:[    //..推荐人1
						{
							name:"员工",
							value:"1"
						},
						{
							name:"客户",
							value:"2"
						}
					],
					selectList5:[    //..推荐人2
						{
							name:"张三别",
							value:"1"
						},
						{
							name:"王思里",
							value:"2"
						},
						{
							name:"李飞刀",
							value:"3",
						}
					],
				},
				mounted(){
					for (let i = 0;i<this.selectList.length;i++) {
						this.selectList[i].active = false;
					}
				},
				methods:{
					showMin(e){
						$(e.currentTarget).next().slideToggle(100)
						$(".nav-tab-box .show-sle-box .list-none").click(function(){
							$(".sle-box .changeSelectData").text($(this).text())
						})
					},
					handlLogo(el){
						console.log(el.target.files[0]);
						var files = el.target.files[0]
						var reader = new FileReader()
						if (/^image/.test( files.type)){
							var reader = new FileReader();
							reader.readAsDataURL(files);
							reader.onloadend = function(){
								console.log(this.result);
								$(".img-box").css({"background-image":"url(" + this.result + ")"})
							}
						}
					},
					checkSel(e,title,index,num){
						if(num == 0){
							this.checkSelcet = title;
						}else if(num == 1){
							this.checkSelcet1 = title;
						}else if(num ==2){
							this.checkSelcet2 = title;
						}else if(num ==3){
							this.checkSelcet3 = title;
						}else if(num ==4){
							this.checkSelcet4 = title;
						}else if(num ==5){
							this.checkSelcet5 = title;
						}
						for (let i = 0;i<this.selectList.length;i++) {
							if(i == index){
								this.selectList[i].active = true;
							}else{
								this.selectList[i].active = false;
							}
						}
					},
					showBox(){   //显示高级搜索框
						$(".serchbox").removeClass("hidden")
					},
					queren(){     //确认
						$(".serchbox").addClass("hidden")
						$(".dutault-nav").addClass("hidden")
						$(".caozuo-nav").removeClass("hidden")
					},
					hiddenBox(){   //隐藏高级搜索框
						$(".serchbox").addClass("hidden")
					},
					empty(){   //清空
						$("#myform").find('input[type=text],.sel').each(function() {
						    $(this).val('');
							$(this).text('');
							$("input[type='radio']").prop("checked",false);
						});
					},
					open(){   //新增
						window.open('jxsadd.html','_self');
					},
					clear(){
						$(".dutault-nav").removeClass("hidden")
						$(".caozuo-nav").addClass("hidden")
					},
					jixu(){
						$(".caozuo-nav").addClass("hidden")
						$(".serchbox").removeClass("hidden")
					},
				}
			})
			
			layui.use(['form','table','laydate','element'], function(){
				var table = layui.table,
				laydate = layui.laydate,
				form = layui.form,
				element = layui.element
				
				//时间范围选择
				laydate.render({
					elem: '#test10',
					type: 'datetime',
					range: true,
					value:Gather.getTime().YearText+" - "+Gather.getTime().YearText,
					format:"yyyy-MM-dd HH:mm",
					max:Gather.getTime().value,
					done: function(value, date, endDate){
						console.log(value); //得到日期生成的值，如：2017-08-18
						console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
						console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
					}
				});	
				
				//订单状态选择
				var orderList = [];
				//全选
				form.on('checkbox(c-all)', function(data){
					if(data.elem.checked){
						$(".typev").prop("checked",true)
						var item = $(".typev");
						for (var i = 0; i < item.length; i++) {
							if (item[i].checked == true) {
								orderList.push({
									id:i,
									name:item[i].value
								})
							}
						}
						form.render('checkbox');
					}else{
						$(".typev").prop("checked",false)
						form.render('checkbox');
					}
				}); 
				
				//单选
				form.on('checkbox(c-one)', function (data) {
					var item = $(".typev");
					for (var i = 0; i < item.length; i++) {
						if (item[i].checked == false) {
							$("#c_all").prop("checked", false);
							form.render('checkbox');
							break;
						}
					}
					//如果都勾选了  勾上全选
					var  all=item.length;
					for (var i = 0; i < item.length; i++) {
						if (item[i].checked == true) {
							console.log("2");
							all--;
						}
					}
					if(all==0){$("#c_all").prop("checked", true);form.render('checkbox');}
					
					//单选时取值
					if(data.elem.checked){
						orderList.push({
							id:"0",
							name:data.elem.value
						})
					}else{
						for(let i = 0;i<orderList.length;i++){
							if(orderList[i].name == data.elem.value){
								orderList.splice(i,1)
							}
						}
					}
				});

				
				//获取列表选中行
				table.on('checkbox()', function(obj){
					var data = table.checkStatus('order-list').data.length;
					showTabMain(data)
				});
				
				// 数据列表渲染
				table.render({
					elem: '#order-list'
					,data:DataArray2// data为数据库查到的数据
					,height: 500
					,cols: [[//以下field字段为为数据库相同,title为字段描述
						{type:'checkbox'}
						,{field:'userid', width:150,event:'namejing', title: '经销商名称',sort: true}
						,{field:'pwd', width:130, title: '经销商编码',sort: true}
						,{field:'uname', width:130, title: '登录账号'}
						,{field:'sex', width: 150, title: '地区',sort:true}
						,{field:'rank', width:130, title: '所在部门',}
						,{field:'uptime', width:130, title: '级别',sort:true}
						,{field:'exptime', width:130, title: '联系人',}
						,{field:'money', width:130, title: '联系方式',}
						,{field:'email', width:130, title: '创建时间',}
						,{field:'scores', width:130, title: '状态',sort:true}
						,{field:'matt', width:130, title: '来源',},
						,{field:'checkmail', fixed: 'right', width:170, title: '操作', toolbar: '#barDemo',}
					]]
					,page: true
				});
				
				table.on('tool(test)', function(obj){
					if(obj.event == 'namejing'){
						window.open('jxsadd.html', '_self');
					}else if(obj.event == 'selext'){
						window.open('jxsadd.html', '_self');
					}else if(obj.event == 'form'){
						window.open('jxsbjd.html', '_self');
					}else if(obj.event == 'del'){
						layer.open({
							title:"确认",
							content: '经销商数据将被删除，删除后不可恢复，请谨慎操作！确认删除吗?',
							btn:['取消','确定']
						});     
					}
				})
				
			});
		</script>
	</body>
</html>
